<template>
    <div class="cart">
        <cartheader></cartheader>
        <div class="cartlist" v-for="item in cart" :key='item.id' v-if="totalCount !== 0">
            <p><input type="checkbox" :checked='item.isChecked' @change="toggleItemChecked(item.id)"></p>
            <p><img :src="item.img" alt=""></p>
            <p>
                <span>{{item.name}}</span><br/>
                <span>{{item.price}}</span><br/>
                <span @click="reduceCartItem(item.id)">-</span>{{item.count}}<span @click="addCartItem(item.id)">+</span>
            </p>
            <button @click="deleteitem(item.id)">删除</button>

        </div>
        <div v-if="totalCount === 0" @click="gotolist" class='gotolist'><span>&#xe631;</span>购物车为空，继续逛逛呗...</div>
    <div class="jiesuan">
        <label>
      <input
        :checked="isAllChecked"
        type="checkbox"
        @change="toggleCheckAll($event)"
      >
      全选
    </label>
        <p>
            <span>已选{{totalCheckedCount}}件商品</span><br/>
            <span>￥{{totalprice}}</span>
        </p>
            <input type="button" value="结算" @click="gotodingdan" class="btn">
    </div>
    </div>
</template>

<script>
import cartheader from '@/components/Cartheader'
// import { COMMENTS } from '@/requests/apis'
import {
  mapState,
  mapMutations,
  //   mapActions,
  mapGetters
} from 'vuex'
export default {
  name: 'Cart',
  //   data () {
  //     return {
  //       list: {}
  //     }
  //   },
  methods: {
    gotodingdan () {
      //   console.log(this)
      this.$router.history.push('/dingdan')
    },
    // add () {
    //   //   console.log("222") 注意这个是字符串把
    // //   this.$store.commit('add') 这个是手动 的
    // }
    ...mapMutations(['toggleItemChecked', 'toggleCheckAll', 'addCartItem', 'reduceCartItem', 'deleteitem']),
    gotolist () {
        this.$router.history.push('/home')
    }
    // ...mapActions(['incAsync'])
  },
  components: {
    cartheader
  },
  //   methods: {
  //     add ()
  //       console.log(22)}
  //   },
  //   mounted () {
  //     this.$http.get(COMMENTS)
  //       .then(resp => {
  //         this.list = resp.data.data[0]
  //         // this.list = resp.data.data[0]
  //         console.log(this.list)
  //       })
  //   },
  //   created () {
  //     //   console.log(this) //$store中有state值count
  //     console.log(this.$store.state.count)
  //   }
  computed: {
    // count () {
    //     return this.$store.state.count   获得store中state值的方法见下
    // }
    ...mapState(['cart']),
    ...mapGetters(['isAllChecked', 'totalCheckedCount', 'totalprice', 'totalCount'])
  }
}
</script>

<style lang='scss'>
@font-face {
  font-family: 'iconfont';  /* project id 931790 */
  src: url('//at.alicdn.com/t/font_931790_33egwctvwn3.eot');
  src: url('//at.alicdn.com/t/font_931790_33egwctvwn3.eot?#iefix') format('embedded-opentype'),
  url('//at.alicdn.com/t/font_931790_33egwctvwn3.woff') format('woff'),
  url('//at.alicdn.com/t/font_931790_33egwctvwn3.ttf') format('truetype'),
  url('//at.alicdn.com/t/font_931790_33egwctvwn3.svg#iconfont') format('svg');
}
.cart{
    position: relative;
}
.cartlist{
    height: 200px;
    width: 100%;
    p{
        float: left;
        &:nth-child(1){
            margin-left: 20px;
            margin-top: 50px;
        }
        &:nth-child(2){
            margin-left: 20px;
            margin-top: 12px;
        }
        &:nth-child(3){
            margin-left: 20px;
            margin-top: 12px;
            span:nth-child(1){
                display: inline-block;
                margin-bottom: 20px;
            }
            span:nth-child(2){
                display: inline-block;
                margin-bottom: 20px;
            }
        }
    }
    button{
        margin-left: 100px;
        margin-top: 54px;
        border: none;
    }
}
.jiesuan{
    position: fixed;
    left: 0;
    bottom: 52px;
    height: 50px;
    width: 100%;
    label{
        float: left;
        margin-left: 10px;
        margin-right: 20px;
    }
    p{
        float: left;
    }
    .btn{
        height: 45px;
        width: 100px;
        margin-left: 92px;
        color: white;
        font-size: 15px;
        background: red;
        border: none;
    }

}
.gotolist{
    height:400px;
    width:100%;
    line-height:400px;
    text-align:center;
    span{
        font-family: iconfont;
        font-size: 78px;
    }
}

</style>
